<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lin的个人博客</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'X字体', sans-serif;
      line-height: 1.6;
    }
    /* 头部样式 */
    header {
      background-color: white;
      padding: 1rem;
    }
    .header-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .blog-title {
      color: black;
      font-size: 2rem;
    }
    nav ul {
      display: flex;
      list-style: none;
      gap: 2rem;
    }
    nav a {
      color: black;
      text-decoration: none;
      font-weight: bold;
    }
    /* 轮播图样式 */
    .carousel {
      width: 100%;
      max-width: 1200px;
      margin: 2rem auto;
      position: relative;
      overflow: hidden;
      height: 400px;
      border-radius: 8px;
    }
    .carousel-images {
      display: flex;
      height: 100%;
      transition: transform 0.5s ease;
    }
    .carousel-img {
      min-width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0,0,0,0.5);
      color: white;
      border: none;
      padding: 1rem;
      cursor: pointer;
      font-size: 1.2rem;
    }
    .prev-btn {
      left: 0;
    }
    .next-btn {
      right: 0;
    }
    /* 博客内容样式 */
    .content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 2rem;
      padding: 0 1rem;
    }
    .articles {
      flex: 3;
    }
    .article-card {
      background-color: #f5f5f5;
      padding: 1.5rem;
      margin-bottom: 2rem;
      border-radius: 8px;
    }
    .sidebar {
      flex: 1;
      background-color: #f0f0f0;
      padding: 1.5rem;
      border-radius: 8px;
    }
    /* 页脚样式 */
    footer {
      text-align: center;
      padding: 2rem;
      margin-top: 2rem;
      background-color: white;
      color: black;
    }
    @media (max-width: 768px) {
      .content {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<!-- 头部导航 -->
<header>
  <div class="header-container">
    <h1 class="blog-title">lin的个人博客</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">分类</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </nav>
  </div>
</header>
<!-- 轮播图 -->
<div class="carousel">
  <div class="carousel-images">
    <img src="./JPG/RED.jpg" alt="图片1" class="carousel-img">
    <img src="./JPG/BLUE.jpg" alt="图片2" class="carousel-img">
    <img src="./JPG/WHITE.jpg" alt="图片3" class="carousel-img">
    <img src="./JPG/MAHOU.jpg" alt="图片4" class="carousel-img">
  </div>
  <button class="carousel-btn prev-btn">←</button>
  <button class="carousel-btn next-btn">→</button>
</div>
<!-- 主要内容 -->
<div class="content">
  <div class="articles">
    <div class="article-card">
      <h2>文章标题 BLOG1</h2>
      <p>发布时间：2025年6月30日 | 分类：1</p>
      <p>文章摘要：这里是文章BLOG1的简要介绍内容，是一个测试blog <a href="http://localhost:63342/TASK1/BLOG1.html?_ijt=prr5jodho83o9okfu0lp6lm9eo&_ij_reload=RELOAD_ON_SAVE">阅读更多</a></p>
    </div>
    <div class="article-card">
      <h2>文章标题 BLOG2</h2>
      <p>发布时间：2025年6月30日 | 分类：2</p>
      <p>文章摘要：这里是文章BLOG2的简要介绍内容，暂无内容... <a href="#">阅读更多</a></p>
    </div>
    <div class="article-card">
      <h2>文章标题 BLOG3</h2>
      <p>发布时间：2025年6月30日 | 分类：3</p>
      <p>文章摘要：这里是文章BLOG3的简要介绍内容，暂无内容... <a href="#">阅读更多</a></p>
    </div>
  </div>
  <div class="sidebar">
    <h3>关于博主</h3>
    <p>大家好，我是lin，一名XTU的学生</p>
    <h3>文章分类</h3>
    <ul>
      <li><a href="#">分类1</a></li>
      <li><a href="#">分类2</a></li>
      <li><a href="#">分类3</a></li>
    </ul>
    <h3>热门标签</h3>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
  </div>
</div>
<!-- 页脚 -->
<footer>
  <p>© 2025年 lin的个人博客 | 联系方式：735894290@qq.com</p>
</footer>
<script>
  // 轮播图功能实现
  const carouselImages = document.querySelector('.carousel-images');
  const images = document.querySelectorAll('.carousel-img');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;
  const totalImages = images.length;
  // 切换图片函数
  function updateCarousel() {
    carouselImages.style.transform = `translateX(-${currentIndex * 100}%)`;
  }
  // 下一张图片
  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % totalImages;
    updateCarousel();
  });
  // 上一张图片
  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    updateCarousel();
  });
  // 自动轮播
  setInterval(() => {
    currentIndex = (currentIndex + 1) % totalImages;
    updateCarousel();
  }, 5000); // 每5秒切换一次
</script>
</body>
</html>
